<template>
	<view class="deliver-page">
		<view class="deliver-content">
			<view
				class="deliver-cell"
			>
				<view
					class="cell-content"
					@click="openExpress"
				>
					<text v-if="selectExpressName">{{ selectExpressName }}</text>
					<text v-else class="gray">请选择物流公司</text>
				</view>
				<view class="cell-image">
					<image class="icon-more" src="@/static/images/icon_prices_up.png"></image>
				</view>
			</view>
			<view class="deliver-cell">
				<view class="cell-content">
					<input
						:value="selectExpressNum"
						placeholder="请输入快递单号"
						placeholder-style="font-size: 26rpx;color: #a0a0a0;"
						class="field-input"
						@input="expressNumChange"
					/>
				</view>
			</view>
			<view class="input-tips">*物流单号仅支持填入字母和数字</view>
			<view
				class="update-button"
				@click="updateExpress"
			>
				<text>{{ originExpressNum ? '我要修改' : '确认发货' }}</text>
			</view>
			<view
				v-if="hsbAddress.address"
				class="deliver-address"
			>
				<view class="address-header">
					<view class="header-title">验机中心地址</view>
					<view class="copy-address" @click="copyAddress">复制地址</view>
				</view>
				<view class="address-body">
					<view class="address-detail">{{ hsbAddress.address }}</view>
					<view class="address-name-phone">{{ hsbAddress.company }} {{ hsbAddress.mobile }}</view>
				</view>
			</view>
		</view>
		<uv-popup
			ref="ExpressCompanyPopup"
			mode="bottom"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-express-actions
				:list="expressList"
				@cancel="closeExpress"
				@choose="chooseExpress"
			/>
		</uv-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	computed: {
		...mapState({
			hsbAddress: state => state.hsbAddress
		})
	},
	data () {
		return {
			orderNum: '',
			expressList: [],
			loading: false,
			selectExpressName: '',
			originExpressNum: '',
			selectExpressNum: ''
		}
	},
	methods: {
		async getExpressCompanyList () {
			const [res] = await this.$apis.getExpressCompanyList()
			if (res._errCode === '0') {
				this.expressList = res._data.companyList || []
			}
		},
		async getDeliveryAddress () {
			this.$store.dispatch('getHsbAddress')
		},
		async updateExpress () {
			if (!this.orderNum || this.loading) return
			if (!this.selectExpressName) {
				return uni.showToast({
					title: '请选择快递公司',
					icon: 'none'
				})
			}
			if (!this.selectExpressNum) {
				return uni.showToast({
					title: '请输入快递单号',
					icon: 'none'
				})
			}
			this.loading = true
			uni.showLoading({
				title: '',
				mask: true
			})
			const [res] = await this.$apis.updateExpressNumber({
				orderNum: this.orderNum,
				expressNumber: this.selectExpressNum,
				company: this.selectExpressName,
			})
			this.loading = false
			uni.hideLoading()
			if (res._errCode === '0') {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} else {
				uni.showToast({
					title: res._errStr || '操作失败',
					icon: 'none'
				})
			}
		},
		openExpress () {
			this.$refs.ExpressCompanyPopup.open()
		},
		closeExpress () {
			this.$refs.ExpressCompanyPopup.close()
		},
		chooseExpress (name) {
			this.closeExpress()
			this.selectExpressName = name
		},
		expressNumChange (e) {
			this.selectExpressNum = e.detail.value
		},
		copyAddress () {
			uni.setClipboardData({
				data: `${this.hsbAddress.address} ${this.hsbAddress.company || ''} ${this.hsbAddress.mobile || ''}`
			})
		}
	},
	onLoad (options) {
		this.orderNum = options.orderNum || ''
		this.selectExpressName = options.expressName || ''
		this.originExpressNum = options.expressCode || ''
		this.selectExpressNum = options.expressCode || ''
		this.getExpressCompanyList()
		this.getDeliveryAddress()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
